<!-- 组合式api -->
<script setup>
import { reactive, ref,computed,watch } from 'vue'
import MyButton from './components/MyButton.vue';
//ref原理：将普通变量(对象) 包装成 对象  num{value:0}
const num = ref(0);
const msg = ref("Hello vue")
// obj.value.name      -->obj{value:{name,age,address}}
// obj:{name:{value:'zp'}}
const obj = reactive({
  name: '周飘',
  age: 18,
  address: {
    prov: '福建'
  }
});
// const obj1 = ({
//   name: '周飘',
//   age: ref(18),
//   address: {
//     prov: '福建'
//   }
// })


//计算属性(缓存,创建阶段):一次定义，只要该状态没有变化，我就可以一直
const okMsg = computed(()=> msg+'OK!');

//侦听器
watch(num,()=>{
  // console.log(num.value);
})

//props


function add() {
  // console.log(obj.value.name);
  num.value++;
}

function onAdd(e) {
  num.value++;
  console.log(num.value);
}


</script>

<template>
  <!-- template：会自动解包:自动添加.value    num->num.value   -->
  <!-- 在解包是，只能用于顶层对象 obj.value.name -->

  <!-- <div>1    {{ obj.age +1}} </div> -->
  <!-- <div>2   {{ obj1.age.value +1}} </div> -->


  <!-- <div>{{okMsg}}</div> -->

  <MyButton :num="num" @add="onAdd" :msg="msg" ></MyButton>
 <br>
  <!-- <button @click="onAdd">点击{{ num }}</button> -->
</template>

